<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<div th:replace="/common/header :: header"></div>
<body>
<style>
	.shuttle_button{width: 68%;margin: auto;display: block;}
</style>
<div class="home_bac">
	<!--头部-->
	<div th:replace="/pc/home/common :: header"></div>

	<div class="home_mol" id="app">
		<div class="home_mtab">
			<p class="home_tit">Order</p>
			<div class="order_bot">
				<div class="order_iwp">
					<div class="clearfix layui-form">
						<div class="layui-inline order_put Shuttle_pr">
							<select lay-filter="order_status" v-model="order.order_id">
								<option th:each="order,item : ${data.shuttleList}" th:value="${order.order_id}">[[${order.shuttle_name}]]</option>
							</select>
<!--							<img src="/images/a6.png" class="Shuttle_pimg">-->
						</div>
						<span class="shuttle_input" >{{order.time_depart.substring(11,13)}}</span>
						<p class="shuttle_tih">H</p>
						<span class="shuttle_input" >{{order.time_depart.substring(14,16)}}</span>
						<p class="shuttle_tih">Min</p>

					</div>

					<ul class="order_btpl">
						<li class="clearfix">
							<p class="order_pbt">Shuttlename：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.shuttle_name}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Order_status：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.order_status_name}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Fromwhere：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.fromwhere}}</p>
							</div>
						</li>
						<li class="clearfix" v-if="order.stop1">
							<p class="order_pbt">Stop1：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.stop1}}</p>
							</div>
						</li>
						<li class="clearfix" v-if="order.stop2">
							<p class="order_pbt">Stop2：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.stop2}}</p>
							</div>
						</li>
						<li class="clearfix" v-if="order.stop3">
							<p class="order_pbt">Stop3：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.stop3}}</p>
							</div>
						</li>
						<li class="clearfix" v-if="order.stop4">
							<p class="order_pbt">Stop4：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.stop4}}</p>
							</div>
						</li>
						<li class="clearfix" v-if="order.stop5">
							<p class="order_pbt">Stop5：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.stop5}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Towhere：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.towhere}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Custo_costs：</p>
							<div class="order_ohi">
								<p class="order_pbs">{{order.custo_costs}} </p>
							</div>
						</li>
						<input type="button" value="Create Order" class="shuttle_button">
					</ul>
				</div>
			</div>
		</div>
		<!--底部菜单-->
		<div th:replace="/pc/home/common :: home_foot"></div>
		<div class="shuttle_pfix">

			<div class="shuttle_fwap">
				<p class="shuttle_tit">Shuttle People</p>
				<img src="/images/a15.png" class="shuttle_x">
				<div class="shuttle_hwap">
					<form action="" method="post" class="layui-form layui-form-pane" >
					<p class="shuttle_hit">Shuttle_name</p>
					<input type="text" v-model="order.shuttle_name" readonly class="shuttle_hinput">
					<p class="shuttle_hit">Contact_Phone</p>
					<input type="number" v-model="order.contact_phone" lay-verify="required|phone" class="shuttle_hinput">

					<p class="shuttle_hit">Contact_Email</p>
					<input type="text" v-model="order.contact_email" lay-verify="email" class="shuttle_hinput">

					<p class="shuttle_hit">Custo_costs</p>
					<input type="number" v-model="order.custo_costs" readonly class="shuttle_hinput">

					<p class="shuttle_hit">Custo_sum</p>
					<input type="number" v-model="custo_sum" lay-verify="required" class="shuttle_hinput">

					<p class="shuttle_hit">Total_money</p>
					<input type="number" v-model="total_money" readonly class="shuttle_hinput">

					<!--			<p class="shuttle_hit">Contact</p>-->
					<!--			<div class="clearfix">-->
					<!--				<input type="text" class="shuttle_hinput wfl">-->
					<!--				<p class="shuttle_add">+</p>-->
					<!--			</div>-->
					<input type="button" lay-submit=""  lay-filter="doSubmit" class="shuttle_but" value="Confirm">
					</form>
				</div>
			</div>
		</div>
	</div>

</div>




<script>



</script>
<script th:inline="javascript">
	var url = Bus4uUtil.serverUrl+"pc/user/update";
	/*加载layui组件*/
	var laydate = null, laypage = null, layer = null, table = null, carousel = null, upload = null, element = null,form = null;

	$(document).ready(function($){
		layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','form' ], function() {
			laydate = layui.laydate //日期
					, layer = layui.layer //弹层
					, form = layui.form
			//国际版
			/*laydate.render({
                elem: '#txtBeginDate'
                ,lang: 'en'
                ,btns:[ 'now', 'confirm']
                ,value:new Date()
            });*/
			form.on('select(order_status)', function(data){
				console.log(data);
				app.order_id = data.value;
				$.ajax({
					url:Bus4uUtil.serverUrl+"/admin/shuttleBusOrder/list",
					type:"post",
					data:{
						order_id:data.value,
					},
					success:function(d){
						if(d.code=="0"){
							if(d.data){
								//默认 创建 订单数据
								app.order = d.data[0];
								app.custo_sum = 1;
								app.total_money = d.data[0].custo_costs;
								layer.msg("搜索成功")
							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});

			});
			form.render('select');
			form.on('submit(doSubmit)', function(data){

				app.order.custo_sum = app.custo_sum;
				app.order.total_money = app.total_money;

				let create_shuttleBusOrder_url="/user/shuttleBusOrder/add";
				let d = JSON.parse(JSON.stringify(app.order));
				$.post(create_shuttleBusOrder_url,d,function(res){
					if(res.code==0){
						$(".shuttle_pfix").hide();
					}
					layer.msg(res.result.msg);
				})
			});
		});

		// nav
		$('.cd-3d-nav-trigger').on('click', function(){
			toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
		});

		function toggle3dBlock(addOrRemove) {
			if(typeof(addOrRemove)==='undefined') addOrRemove = true;
			$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
		}
		// 弹出层
		$(".shuttle_button").click(function(){
			$(".shuttle_pfix").show();
		})
		$(".shuttle_x").click(function(){
			$(".shuttle_pfix").hide();
		})
	});
	var orderList = JSON.parse('[[${data.shuttleList}]]');
	var app = new Vue({
		el:"#app",
		data:{
			order:orderList? orderList[0] : null, //订单
			startAndEndTime:"",//收索条件 时间
			order_status:"",//订单状态
			startTime:null,
			endTime:null,
			active:-1,//选中 btn
			page:1,//页码
			total_money:0,
			custo_sum:1
		},
		mounted(){
			console.log(this.order.custo_costs)
			this.total_money = this.custo_sum * this.order.custo_costs
		},
		watch:{
			//监听 内容属性计算 总价
			custo_sum(val) {
				console.log(this.custo_sum)
				this.total_money = this.custo_sum * this.order.custo_costs ;
			}
		},
		methods: {
			//搜素 订单
			search: function () {
				let self = this;
				// if (!this.startTime) {
				// 	layer.msg("时间范围未选择")
				// 	return false;
				// }
				// console.log("ajax调用搜索订单接口")
				$.ajax({
					url:Bus4uUtil.serverUrl+"/order/search",
					type:"post",
					data:{
						start:self.startTime,
						end:self.endTime,
						order_status:self.order_status,
						page:this.page,
						limit:1
					},
					success:function(d){
						if(d.code=="0"){
							if(d.result.data){
								self.order = d.result.data[0];

								layer.msg("搜索成功")
							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});
			},
			//添加订单
			addOrder:function () {
				let self = this;
				self.active = 0;
				let w = $(window).width()>1024 ? '720px' : '100%';
				layer.open({
					type:2,
					title:'AddOrder',
					content:Bus4uUtil.serverUrl+"home/addOrder.html",
					area:[w,'100%'],
					cancel: function(index, layero){
						self.active = -1;
						layer.close(index);
						return false;
					},
					end:function(){
						// layer.msg("订单新增页面关闭自动执行订单状态为New的搜索");
						app.order_status="0";
						if(self.order_status!=null){
							$("#order_status_select").val(self.order_status);
						}else{
							$("#order_status_select").val("");
						}
						form.render();
						app.search();
						return false;
					}
				});
			},
			//修改订单
			editOrder:function (e) {

				var self = this;
				self.active = 1;
				let w = $(window).width()>1024 ? '720px' : '100%';
				layer.open({
					type:2,
					title:'EditOrder',
					content:Bus4uUtil.serverUrl+"home/editOrder.html?order_id="+e,
					area:[w,'100%'],
					cancel: function(index, layero){
						self.active = -1;
						layer.close(index);
						return false;
					}
				});
			},
			//下一条 订单
			nextOrder:function () {
				this.page++;
				let self = this;
				this.active = 6;
				$.ajax({
					url:Bus4uUtil.serverUrl+"/order/search",
					type:"post",
					data:{
						start:self.startTime,
						end:self.endTime,
						order_status:self.order_status,
						page:this.page,
						limit:1,
					},
					success:function(d){
						if(d.code=="0"){
							if(d.result.data){
								self.order = d.result.data[0];
								layer.msg("搜索成功")

								//当分页条数 >= 条数时,隐藏下一条
								console.log("page="+self.page)
								console.log("count="+d.result.count)
								if(self.page >= d.result.count){
									$(".nextOrder").hide();
								}else{
									$(".nextOrder").show();
								}

							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});

			},
			//上一条 订单
			preOrder:function () {
				this.page--;
				let self = this;
				this.active = 5;
				$.ajax({
					url:Bus4uUtil.serverUrl+"/order/search",
					type:"post",
					data:{
						start:self.startTime,
						end:self.endTime,
						order_status:self.order_status,
						page:this.page,
						limit:1,
					},
					success:function(d){
						if(d.code=="0"){
							if(d.result.data){
								self.order = d.result.data[0];
								layer.msg("搜索成功")


								if(self.page <= 1){
									$(".PreOrder").hide();
								}

								if(self.page >= d.result.count){
									$(".nextOrder").hide();
								}else{
									$(".nextOrder").show();
								}

							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});
			},

			//修改订单
			updateOder:function(n){
				let that = this;
				if(n==10){
					layer.confirm('你确定要取消这条订单吗?', {icon: 3, title:'提示'}, function(index){
						$.ajax({
							url:Bus4uUtil.serverUrl+"/order/update",
							type:"post",
							data:{
								"order_id":that.order.order_id,
								"order_status":n
							},
							success:function(d){
								if(d.code=="0"){
									layer.msg("操作成功");
									parent.location.reload();
								}else{
									layer.msg(d.msg)
								}
							}
						});
						layer.close(index);
					});

				}else{
					$.ajax({
						url:Bus4uUtil.serverUrl+"/order/update",
						type:"post",
						data:{
							"order_id":that.order.order_id,
							"order_status":n
						},
						success:function(d){
							if(d.code=="0"){
								layer.open({
									icon: 1,
									closeBtn: 0,
									content: 'Thank You , Order Accepted,  will give you our best price very soon'
									,btn: ['确定']
									,yes: function(index, layero){
										layer.close(index);
										parent.location.reload();
									}
								});

							}else{
								layer.msg(d.msg)
							}
						}
					});
				}


			},
			//支付订单
			payTheOrder:function(){
				let that = this;
				// console.log(that.order.order_id);
				location.href=Bus4uUtil.serverUrl+"/order/payTheOrder/"+that.order.order_id+".html";
				// $.ajax({
				// 	url:Bus4uUtil.serverUrl+"/order/update",
				// 	type:"post",
				// 	data:{
				// 		"order_id":that.order.order_id,
				// 		"order_status":n
				// 	},
				// 	success:function(d){
				// 		if(d.code=="0"){
				// 			layer.msg("操作成功");
				// 			parent.location.reload();
				// 		}else{
				// 			layer.msg(d.msg)
				// 		}
				// 	}
				// });
			}
		},
	});


</script>
</body>
</html>
